<template>
  <div class="container">
    <template v-if="loaded">
      <navbar ref="navbar" :title="title" showTitle="title" theme="gradient" :titleNode="!title"
              :leftItemIcon="'\ue600'"
              :leftShow="navbarLeftShow">
        <searchbar theme="light" class="flex-1"
                   :disabled="searchFrom ? false : true"
                   slot="titleNode"
                   @click="searchbarClick()"></searchbar>
      </navbar>
      <scroller class="level1-container" scroll-direction="vertical">
        <div @click="selectLevel1Shopcat(shopcat)" v-bind:key="shopcat.id" :class="['level1-shopcat-title', selectedShopcat == shopcat && 'level1-shopcat-title-selected']"
             v-for="shopcat in level1ShopcatList">
          <text :class="['level1-shopcat-title-text', selectedShopcat == shopcat && 'level1-shopcat-title-text-selected']"
          >{{shopcat.title}}</text>
        </div>
      </scroller>
      <scroller scroll-direction="vertical" class="children-panel">
        <div ref="top" class="top-el"></div>
        <template v-if="selectedShopcat">
          <div class="s-panel" v-for="shopcat in selectedShopcat.children" v-bind:key="shopcat.id">
            <div class="s-panel-head">
              <text class="s-panel-head-title">{{shopcat.title}}</text>
              <text class="s-panel-head-link icon text-warning" @click="shopcatClick(shopcat)" v-if="shopcat.id">热销榜&#xe601;</text>
            </div>
            <div class="s-panel-body">
              <div class="shopcat-list-row" v-bind:key="idx" v-for="(children, idx) in shopcat.childrenRowList">
                <div class="shopcat-info" v-for="child in children" @click="shopcatClick(child)" v-bind:key="child.id">
                  <image :src="child.iconUrl" class="shopcat-info-icon"></image>
                  <text class="shopcat-info-title">{{child.title}}</text>
                </div>
              </div>
            </div>
          </div>
        </template>
      </scroller>
    </template>
    <page-loading :loaded="loaded"></page-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/activeable";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .level1 {
    &-container {
      background-color: #ffffff;
      position: fixed;
      top: 130px;
      bottom: 0;
      left: 0;
      width: 160px;
    }
    &-shopcat-title {
      height: 110px;
      justify-content: center;
      &-selected {
        background-color: #F6F6F6;
      }
      &-text {
        font-size: 26px;
        text-align: center;
        font-weight: 300;
        color: $color;
        @include border-left(5px, solid, #fff);
        @include border-right(5px, solid, #fff);
        &-selected {
          font-weight: 400;
          font-size: 30px;
          color: #000;
          @include border-left(5px, solid, $brand-primary);
          @include border-right(5px, solid, #F6F6F6);
        }
      }
    }
  }

  .children-panel {
    background-color: #F6F6F6;
    position: fixed;
    top: 130px;
    right: 0;
    bottom: 0;
    left: 160px;
    padding: 30px;
    padding-top: 0;
  }

  .top-el {
    margin-bottom: 30px;
  }

  .s-panel {
    &-head {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &-title {
        font-size: 28px;
        color: $color;
      }
      &-link {
        font-size: 26px;
      }
      margin-bottom: 20px;
    }
    &-body {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 20px;
    }
    margin-bottom: 30px;
  }

  .shopcat-list-row {
    flex-direction: row;
    justify-content: space-between;
  }
  .shopcat-info {
    flex: 1;
    padding: 20px;
    align-items: center;
    &-icon {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
    &-title {
      text-align: center;
      lines: 1;
      text-overflow: clip;
      overflow: hidden;
      font-size: 24px;
      color: $color;
    }
  }
</style>
<script>

let api = require('./include/api')
let navigator = require('./include/xnavigator')
let grouping = require('./include/grouping')
let dom = weex.requireModule('dom')
let pageCache = require('./include/page-cache')
let PAGE_SHOCAT_DATA_CACHE_KEY = 'PAGE_SHOPCAT_DATA'
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-loading')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    'searchbar': require('./components/searchbar.vue')
  },
  data () {
    return {
      level1ShopcatList: [],
      navbarLeftShow: false,
      selectedShopcat: null
    }
  },
  created () {
    pageCache.cache(PAGE_SHOCAT_DATA_CACHE_KEY).done(rs => {
      if (rs) {
        this.handleData(rs)
        this.loaded = true
      } else {
        this.loadData().done(rs => {
          this.loaded = true
        })
      }
    })
  },
  methods: {
    searchbarClick () {
      if (!this.searchFrom) {
        navigator.push({
          url: 'search.js'
        })
      }
    },
    selectLevel1Shopcat (shopcat) {
      setTimeout(() => {
        dom.scrollToElement(this.$refs.top)
      }, 300)
      if (shopcat.children) {
        !shopcat.childrenHandled && this.handleChildren(shopcat)
        this.selectedShopcat = shopcat
      } else {
        api.shopcat.listTree({path: shopcat.path}).done(rs => {
          let data = rs.data
          shopcat.children = data
          this.handleChildren(shopcat)
          this.selectedShopcat = shopcat
        })
      }
    },
    loadData () {
      return api.shopcat.list({parentIds: 0, children: true}).done(rs => {
        this.handleData(rs)
        pageCache.cache(PAGE_SHOCAT_DATA_CACHE_KEY, rs)
      })
    },
    handleData (rs) {
      let data = rs.data
      this.level1ShopcatList = data
      this.selectLevel1Shopcat(data[0])
    },
    shopcatClick (shopcat) {
      navigator.push('commission-item-search.js?catIds=' + shopcat.id + '&title=' + encodeURIComponent(shopcat.title))
    },
    handleChildren (shopcat) {
      let hot = {
        title: '热门',
        children: []
      }

      for (var i in shopcat.children) {
        let child = shopcat.children[i]
        if (!child.children || !child.children.length) {
          hot.children.push(child)
        } else {
          child.childrenRowList = grouping(child.children, 3, true)
        }
      }
      if (hot.children.length > 0) {
        hot.childrenRowList = grouping(hot.children, 3, true)
        shopcat.children.unshift(hot)
      }
      shopcat.childrenHandled = true
    }
  }
}
</script>
